<template>
<div class="header">
  <div class="header-position head-height"></div>
  <div class="header-box head-height"  v-if="logo && logo.resUrl">
    <a-row class="wh row head-height">
      <span @click="goToPage('index')" class="header-logo">
        <img class="logo" :src="logoImg">
      </span>
      <span class="header-info dis-show" >{{logo.resContent}}</span>
      <a-col class="header-nav noslt" :xs=24 :sm=24 :md=0 :lg=0 :xl=0>
        <MenuFoldOutlined style=" font-size:20px;" @click="navVisible = true" />
        <a-drawer class="nav-drawer" title="目 录" placement="right" @close="navVisible = false" :visible="navVisible">
          <span @click="goToPage(item.channelName)" :class="{'nav-li-cur':channel==item.channelName}" v-for="item in nav" :key="item.id"  class="nav-li">
            <component :is="item.channelName"></component> 
            {{item.channelTitle}}
          </span>
        </a-drawer>      
      </a-col>
      <a-col class="header-nav noslt" :xs=0 :sm=0 :md=24 :lg=24 :xl=24>
        <span @click="goToPage(item.channelName)" :class="{'nav-li-cur':channel==item.channelName}" v-for="item in nav" :key="item.id"  class="nav-li">
          <component :is="item.channelName"></component>  
          {{item.channelTitle}}
        </span>
      </a-col>
    </a-row>
  </div>
</div>
</template>
<script>
import axios from "@/global/axios";
import api from "@/global/api";
import { useRouter } from 'vue-router'
import { reactive,ref,toRefs,onMounted,computed,watch } from 'vue'
import { MenuFoldOutlined ,HomeOutlined ,UnorderedListOutlined,FireOutlined,QuestionCircleOutlined} from '@ant-design/icons-vue'
export default {
  components: {
    MenuFoldOutlined,
    index:HomeOutlined,
    list:UnorderedListOutlined,
    channel:FireOutlined,
    about:QuestionCircleOutlined,
  },  
  setup() {
    const router = useRouter();
    const headerData = reactive({
      logo:'',
      nav:'',
    });
    const channel = ref('');
    const navVisible = ref(false)
    onMounted( async () => {
      let _logo =  await axios.get(api.getRes,{params:{resName:'logo'}});
      headerData.logo = _logo.data;
      let _nav = await axios.get(api.getNav);
      headerData.nav = _nav.data;
      channel.value = router.currentRoute.value.name;
    });
    //watch([navVisible, () => headerData.logo],(newValue,oldValue)=>{
      //console.log('new',newValue[1].id)
      //console.log('old',oldValue[1].id)
    //});    
    const logoImg = computed(() => {
      return api.host + headerData.logo.resUrl;
    });
    const goToPage = (path) => {
      navVisible.value = false;
      channel.value = path;
      router.push('/'+path);	
    };   
    return {
      ...toRefs(headerData),
      logoImg,
      channel,
      goToPage,
      navVisible
    }
  }
}
</script>
<style scoped>
.header-position{ width:100%; overflow:hidden;}
.header-box{ width:100%; z-index:99;  background:#fff; top:0; left:0; position:fixed;  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);}
.header-main{height:80px;}
.header-logo .logo{ height:50px;}
.header-info{ margin:25px  0 0 20px; color:#999; font-size:16px;}
.header-nav{flex:1; height:55px; line-height:55px; text-align:right; font-size:16px;}
.nav-li{ cursor:pointer; margin-right:25px; font-size:16px; transition:color ease 0.2s;}
.nav-li i{ vertical-align:middle; margin:-3px 6px 0 0;}
.nav-li:hover{ color:#1296DB; transition:color ease 0.2s;}
.nav-li-cur{ color:#1296DB;transition:color ease 0.2s;}
.nav-drawer >>> .ant-drawer-body{ padding:0 15px;}
.nav-drawer .nav-li{ display:block; border-bottom:1px solid #E8E8E8; padding:10px 0;}
@media (max-width: 750px) {
.head-height{ height:65px;}	
.dis-show{ display:none;}
}
@media (min-width: 750px) {
.head-height{ height:80px;}	
.dis-show{ display:inline;}
}
</style>